﻿@page
@model KentNoteBook.WebApp.Pages.DashboardModel
@{
	ViewData["Title"] = "DashboardV1";

	Layout = null;
}

<!--- Breadcrumbs -->
<ol class="breadcrumb">
	<li class="breadcrumb-item">
		<a href="/Dashboard" ajax-link="true" data-url="/dashboard" data-update-panel=".main-container">Dashboard</a>
	</li>
	<li class="breadcrumb-item active">My Dashboard</li>
</ol>

<div class="card mb-3">
	<div class="card-header">
		<i class="fa fa-table"></i> Data Table Example
	</div>
	<div class="card-body">
		<div class="table-responsive">
			<div id="dataTable_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4">
				<form>
					<div class="form-row">
						<div class="col-sm-12 col-md-6 mb-1">
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Search for ..." aria-label="Search for ..." aria-describedby="basic-addon2">
								<div class="input-group-append">
									<button class="btn btn-primary" type="button">
										<i class="fa fa-search"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
				</form>
				<div class="row">
					<div class="col-sm-12">
						<table class="table table-striped table-bordered table-hover dataTable" id="dataTable" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
							<thead>
								<tr role="row"><th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 53px;">Name</th><th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 65px;">Position</th><th class="sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Office: activate to sort column descending" style="width: 47px;" aria-sort="ascending">Office</th><th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 30px;">Age</th><th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 66px;">Start date</th><th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 60px;">Salary</th></tr>
							</thead>
							<tfoot>
								<tr><th rowspan="1" colspan="1">Name</th><th rowspan="1" colspan="1">Position</th><th rowspan="1" colspan="1">Office</th><th rowspan="1" colspan="1">Age</th><th rowspan="1" colspan="1">Start date</th><th rowspan="1" colspan="1">Salary</th></tr>
							</tfoot>
							<tbody>
								<tr role="row" class="odd">
									<td class="bg-warning">Cedric Kelly</td>
									<td>Senior Javascript Developer</td>
									<td class="sorting_1">Edinburgh</td>
									<td>22</td>
									<td>2012/03/29</td>
									<td>$433,060</td>
								</tr>
								<tr role="row" class="even">
									<td class="">Dai Rios</td>
									<td class="bg-primary">Personnel Lead</td>
									<td class="sorting_1">Edinburgh</td>
									<td>35</td>
									<td>2012/09/26</td>
									<td>$217,500</td>
								</tr>
								<tr role="row" class="odd">
									<td class="">Gavin Joyce</td>
									<td>Developer</td>
									<td class="sorting_1 bg-success">Edinburgh</td>
									<td>42</td>
									<td>2010/12/22</td>
									<td>$92,575</td>
								</tr>
								<tr role="row" class="even">
									<td class="">Jennifer Acosta</td>
									<td>Junior Javascript Developer</td>
									<td class="sorting_1">Edinburgh</td>
									<td class="bg-danger">43</td>
									<td>2013/02/01</td>
									<td>$75,650</td>
								</tr>
								<tr role="row" class="odd">
									<td class="">Martena Mccray</td>
									<td>Post-Sales support</td>
									<td class="sorting_1">Edinburgh</td>
									<td>46</td>
									<td class="bg-info">2011/03/09</td>
									<td>$324,050</td>
								</tr>
								<tr role="row" class="even">
									<td class="">Quinn Flynn</td>
									<td>Support Lead</td>
									<td class="sorting_1">Edinburgh</td>
									<td>22</td>
									<td>2013/03/03</td>
									<td>$342,000</td>
								</tr>
								<tr role="row" class="odd">
									<td class="">Shad Decker</td>
									<td>Regional Director</td>
									<td class="sorting_1">Edinburgh</td>
									<td>51</td>
									<td>2008/11/13</td>
									<td>$183,000</td>
								</tr>
								<tr role="row" class="even">
									<td class="">Sonya Frost</td>
									<td>Software Engineer</td>
									<td class="sorting_1">Edinburgh</td>
									<td>23</td>
									<td>2008/12/13</td>
									<td>$103,600</td>
								</tr>
								<tr role="row" class="odd">
									<td class="">Tiger Nixon</td>
									<td>System Architect</td>
									<td class="sorting_1">Edinburgh</td>
									<td>61</td>
									<td>2011/04/25</td>
									<td>$320,800</td>
								</tr>
								<tr role="row" class="even">
									<td class="">Angelica Ramos</td>
									<td>Chief Executive Officer (CEO)</td>
									<td class="sorting_1">London</td>
									<td>47</td>
									<td>2009/10/09</td>
									<td>$1,200,000</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12 col-md-5"><div class="dataTables_info" id="dataTable_info" role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div></div>
					<div class="col-sm-12 col-md-7">
						<div class="dataTables_paginate paging_simple_numbers" id="dataTable_paginate">
							<ul class="pagination">
								<li class="paginate_button page-item previous disabled" id="dataTable_previous"><a href="#" aria-controls="dataTable" data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>
								<li class="paginate_button page-item active"><a href="#" aria-controls="dataTable" data-dt-idx="1" tabindex="0" class="page-link">1</a></li>
								<li class="paginate_button page-item "><a href="#" aria-controls="dataTable" data-dt-idx="2" tabindex="0" class="page-link">2</a></li>
								<li class="paginate_button page-item "><a href="#" aria-controls="dataTable" data-dt-idx="3" tabindex="0" class="page-link">3</a></li>
								<li class="paginate_button page-item "><a href="#" aria-controls="dataTable" data-dt-idx="4" tabindex="0" class="page-link">4</a></li>
								<li class="paginate_button page-item "><a href="#" aria-controls="dataTable" data-dt-idx="5" tabindex="0" class="page-link">5</a></li>
								<li class="paginate_button page-item "><a href="#" aria-controls="dataTable" data-dt-idx="6" tabindex="0" class="page-link">6</a></li>
								<li class="paginate_button page-item next" id="dataTable_next"><a href="#" aria-controls="dataTable" data-dt-idx="7" tabindex="0" class="page-link">Next</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>